<template>
    <div class="parent">
        <header class="header">
            <x-header class="headerContent" :left-options="{backText: ''}"><span class="title">{{FPLX}}</span></x-header>
        </header>
        <main class="main">
            <p class="tipTitle">请确认以下内容是否正确!</p>
            <ul class="list" v-if="elelistShow">
                <li class="listItem">
                    <label for="">发票类型:</label>
                    <span class="val">{{FPLX}}</span>
                </li>
                <li class="listItem">
                    <label for="">抬头类型:</label>
                    <span class="val">{{TTLX}}</span>
                </li>
                <li class="listItem">
                    <label for="">发票抬头:</label>
                    <span class="val">{{TT}}</span>
                </li>
                <li class="listItem">
                    <label for="">纳税人识别号:</label>
                    <span class="val">{{NSRSBH}}</span>
                </li>
                <li class="listItem">
                    <label for="">发票金额:</label>
                    <span class="val">{{FPJE}}</span>
                </li>
                <li class="listItem">
                    <label for="">地址:</label>
                    <span class="val">{{DZDH}}</span>
                </li>
                <li class="listItem">
                    <label for="">电话号码:</label>
                    <span class="val">{{ZCDH}}</span>
                </li>
                <li class="listItem">
                    <label for="">开户行及账号:</label>
                    <span class="val">{{KHHZH}}</span>
                </li>
                <li class="listItem">
                    <label for="">电子邮箱:</label>
                    <span class="val">{{YX}}</span>
                </li>
            </ul>
            <ul class="list" v-else-if="eleperlistShow">
                <li class="listItem">
                    <label for="">发票类型:</label>
                    <span class="val">{{FPLX}}</span>
                </li>
                <li class="listItem">
                    <label for="">抬头类型:</label>
                    <span class="val">{{TTLX}}</span>
                </li>
                <li class="listItem">
                    <label for="">发票抬头:</label>
                    <span class="val">{{TT}}</span>
                </li>
                <li class="listItem">
                    <label for="">发票金额:</label>
                    <span class="val">{{FPJE}}</span>
                </li>
                <li class="listItem">
                    <label for="">电子邮箱:</label>
                    <span class="val">{{YX}}</span>
                </li>
            </ul>
            <ul class="list" v-else-if="pagelistShow">
                <li class="listItem">
                    <label for="">发票类型:</label>
                    <span class="val">{{FPLX}}</span>
                </li>
                <li class="listItem">
                    <label for="">抬头类型:</label>
                    <span class="val">{{TTLX}}</span>
                </li>
                <li class="listItem">
                    <label for="">发票抬头:</label>
                    <span class="val">{{TT}}</span>
                </li>
                <li class="listItem">
                    <label for="">纳税人识别号:</label>
                    <span class="val">{{NSRSBH}}</span>
                </li>
                <li class="listItem">
                    <label for="">发票金额:</label>
                    <span class="val">{{FPJE}}</span>
                </li>
                <li class="listItem">
                    <label for="">地址:</label>
                    <span class="val">{{DZDH}}</span>
                </li>
                <li class="listItem">
                    <label for="">电话号码:</label>
                    <span class="val">{{ZCDH}}</span>
                </li>
                <li class="listItem">
                    <label for="">开户行及账号:</label>
                    <span class="val">{{KHHZH}}</span>
                </li>
                <li class="listItem">
                    <label for="">收件人:</label>
                    <span class="val">{{SJR}}</span>
                </li>
                <li class="listItem">
                    <label for="">电子邮箱:</label>
                    <span class="val">{{YX}}</span>
                </li>
            </ul>
            <ul class="list" v-else-if="pageperlistShow">
                <li class="listItem">
                    <label for="">发票类型:</label>
                    <span class="val">{{FPLX}}</span>
                </li>
                <li class="listItem">
                    <label for="">抬头类型:</label>
                    <span class="val">{{TTLX}}</span>
                </li>
                <li class="listItem">
                    <label for="">发票抬头:</label>
                    <span class="val">{{TT}}</span>
                </li>
                <li class="listItem">
                    <label for="">发票金额:</label>
                    <span class="val">{{FPJE}}</span>
                </li>
                <li class="listItem">
                    <label for="">收件人:</label>
                    <span class="val">{{SJR}}</span>
                </li>
                <li class="listItem">
                    <label for="">联系电话:</label>
                    <span class="val">{{ZCDH}}</span>
                </li>
                <li class="listItem">
                    <label for="">收件地址:</label>
                    <span class="val">{{DZDH}}</span>
                </li>
            </ul>
        </main>
        <footer class="footer" @click="submission">提交</footer>
    </div>
</template>
<script>
import { XHeader } from 'vux'
export default {
    name: 'Invoicedetail',
    data () {
        return {
            FPLX: '',
            TTLX: '',
            TT: '',
            NSRSBH: '',
            FPJE: '',
            DZDH: '',
            ZCDH: '',
            KHHZH: '',
            YX: '',
            SJR: '',
            elelistShow: false,
            eleperlistShow: false,
            pagelistShow: false,
            pageperlistShow: false,
            dataList: []
        }
    },
    components: {
        XHeader
    },
    created () {
        this.FPLX = this.$route.params.FPLX;
        this.TTLX = this.$route.params.TTLX;
        this.TT = this.$route.params.TT;
        this.NSRSBH = this.$route.params.NSRSBH;
        this.FPJE = this.$route.params.FPJE;
        this.DZDH = this.$route.params.DZDH;
        this.ZCDH = this.$route.params.ZCDH;
        this.KHHZH = this.$route.params.KHHZH;
        this.YX = this.$route.params.YX;
        this.SJR = this.$route.params.SJR;
        if (this.FPLX == '电子发票' && this.TTLX == '企业') {
            this.elelistShow = true
        } else if (this.FPLX == '电子发票' && this.TTLX == '个人/非企业性单位') {
            this.eleperlistShow = true
        } else if (this.FPLX == '纸质发票' && this.TTLX == '企业') {
            this.pagelistShow = true
        } else if (this.FPLX == '纸质发票' && this.TTLX == '个人/非企业性单位') {
            this.pageperlistShow = true
        }
    },
    methods: {
        submission() {
            // if (this.elelistShow) {
            //     this.$axios.post('http://192.168.1.26:8080/app/mock/16/api/elelist')
            // } else if (this.eleperlistShow) {
            //     this.$axios.post('http://192.168.1.26:8080/app/mock/16/api/eleperlist')
            // } else if (this.pagelistShow) {
            //     this.$axios.post('http://192.168.1.26:8080/app/mock/16/api/pagelist')
            // } else if (this.pageperlistShow) {
            //     this.$axios.post('http://192.168.1.26:8080/app/mock/16/api/pageperlist')
            // }
            let params = this.$route.params

            this.$router.push({
                name: 'Submissionsuccess',
                params: params
            })
        }
    }
}
</script>
<style scoped lang="less">
.parent{
    width: 100%;
}
.header{
    width: 100%;
}
.title{
    font-size: 16px;
    font-family:ArialMT;
    color:rgba(255,255,255,1);
    line-height:18px;
    letter-spacing:1px;
}
.headerContent{
    width: 100%;
    background:linear-gradient(135deg,rgba(255,199,38,1) 0%,rgba(249,151,22,1) 100%);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.main{
    width: 100%;
    .tipTitle{
        width: 100%;
        height: .96rem;
        padding: .213333rem .133333rem;
        background: rgba(250, 250, 250, 1);
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        font-size:14px;
        font-family:ArialMT;
        color:rgba(249,152,23,1);
        line-height:16px;
        letter-spacing:1px;
    }
    .list{
        width: 100%;
        background: #fff;
        .listItem{
            width: 100%;
            height: 1.333333rem;
            padding: 0 .48rem;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            position: relative;
            label{
                display: block;
                width: 2.666667rem;
                height: 100%;
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
                font-size:12px;
                font-family:ArialMT;
                color:rgba(82,82,82,1);
                line-height:14px;
                letter-spacing:1px;
            }
            .val{
                display: block;
                width: 6.4rem;
                height: 100%;
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
                background: #fff;
            }
        }
        .listItem:after{
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            background: #cccccc;
            width: 100%;
            height: 1px;
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
        }
    }
}
.footer{
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 1.28rem;
    font-size: 0.16rem;
    font-size:16px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(255,255,255,1);
    line-height:22px;
    letter-spacing:1px;
    color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background:linear-gradient(118deg,rgba(255,199,38,1) 0%,rgba(249,151,22,1) 100%);
}
</style>

